<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
      <el-form-item label="成果名称" prop="achievementName">
        <el-select
          v-loadMore="loadMore"
          style="width: 198px" v-model="queryParams.achievementName" clearable remote
          :remote-method="remoteMethod" filterable placeholder="请选择"
        >
          <el-option v-for="(dict,index) in optionsitem" :key="index" :label="dict.label" :value="dict.label">
            <span style="float: left">{{ dict.label }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证书编号" prop="certificateNumber">
        <el-input
          v-model="queryParams.certificateNumber"
          placeholder="请输入证书编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="证书负责人" prop="principalName">
        <el-input
          v-model="queryParams.principalName"
          placeholder="请输入证书负责人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['village:achievement:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['village:achievement:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['village:achievement:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['village:achievement:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="achievementList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="编号" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="ID号" align="center" prop="achievementId"/>
      <el-table-column label="证书编号" align="center" prop="certificateNumber"/>
      <el-table-column label="成果类型" align="center" prop="achievementType"/>
      <el-table-column label="成果名称" align="center" prop="achievementName"/>
      <el-table-column label="证书负责人" align="center" prop="principalName"/>
      <el-table-column label="参与人员" align="center" prop="participant"/>
      <el-table-column label="成果级别" align="center" prop="achievementRank">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.village_achievement_rank" :value="scope.row.achievementRank"/>
        </template>
      </el-table-column>
      <el-table-column label="成果等级" align="center" prop="achievementGrade">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.village_achievement_grade" :value="scope.row.achievementGrade"/>
        </template>
      </el-table-column>
      <el-table-column label="颁发日期" align="center" prop="awardTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.awardTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="颁发单位" align="center" prop="awardName"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-unfold"
            @click="handledetailopen(scope.row)"
          >详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['village:achievement:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['village:achievement:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改成果管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="750px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" :inline="true">
        <el-form-item label="ID号" prop="achievementId">
          <el-input v-model="form.achievementId" placeholder="请输入ID号"/>
        </el-form-item>
        <el-form-item label="证书编号" prop="certificateNumber">
          <el-input v-model="form.certificateNumber" placeholder="请输入证书编号"/>
        </el-form-item>
        <el-form-item label="成果名称" prop="achievementName">
          <el-input v-model="form.achievementName" placeholder="请输入成果名称"/>
        </el-form-item>
        <el-form-item label="成果类型" prop="achievementType">
          <el-input v-model="form.achievementType" placeholder="请输入成果类型"/>
        </el-form-item>
        <el-form-item label="证书负责人" prop="principalName">
          <el-input v-model="form.principalName" placeholder="请输入证书负责人"/>
        </el-form-item>
        <el-form-item label="参与人员" prop="participant">
          <el-input v-model="form.participant" placeholder="请输入参与人员"/>
        </el-form-item>
        <el-form-item label="成果级别" prop="achievementRank">
          <el-select style="width: 204px" v-model="form.achievementRank" placeholder="请选择成果级别">
            <el-option
              v-for="dict in dict.type.village_achievement_rank"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成果等级" prop="achievementGrade">
          <el-select style="width: 204px" v-model="form.achievementGrade" placeholder="请选择成果等级">
            <el-option
              v-for="dict in dict.type.village_achievement_grade"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="颁发日期" prop="awardTime">
          <el-date-picker clearable
                          style="width: 204px"
                          v-model="form.awardTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择颁发日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="颁发单位" prop="awardName">
          <el-input v-model="form.awardName" placeholder="请输入颁发单位"/>
        </el-form-item>
        <el-form-item style="width: 700px" label="标志性成果" prop="isLandmark" v-if="name === 'admin'">
          <el-radio-group v-model="form.isLandmark">
            <el-radio
              v-for="dict in dict.type.village_whether"
              :key="dict.value"
              :label="parseInt(dict.value)"
            >{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="佐证材料" prop="supportingMaterial">
          <file-upload :isShowTip="false" style="width: 400px" v-model="form.supportingMaterial"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="detailopen" width="780px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="170px" :inline="true">
        <el-form-item label="ID号：" style="width: 320px" prop="achievementId">
          {{ form.achievementId }}
        </el-form-item>
        <el-form-item label="证书编号：" style="width: 320px" prop="certificateNumber">
          {{ form.certificateNumber }}
        </el-form-item>
        <el-form-item label="成果名称：" style="width: 320px" prop="achievementName">
          {{ form.achievementName }}
        </el-form-item>
        <el-form-item label="成果类型：" style="width: 320px" prop="achievementType">
          {{ form.achievementType }}
        </el-form-item>
        <el-form-item label="证书负责人：" style="width: 320px" prop="principalName">
          {{ form.principalName }}
        </el-form-item>
        <el-form-item label="参与人员：" style="width: 320px" prop="participant">
          {{ form.participant }}
        </el-form-item>
        <el-form-item label="成果级别：" style="width: 320px" prop="achievementRank">
          <dict-tag :options="dict.type.village_achievement_rank" :value="form.achievementRank"/>
        </el-form-item>
        <el-form-item label="成果等级：" style="width: 320px" prop="achievementGrade">
          <dict-tag :options="dict.type.village_achievement_grade" :value="form.achievementGrade"/>
        </el-form-item>
        <el-form-item label="颁发日期：" style="width: 320px" prop="awardTime">
          {{ form.awardTime }}
        </el-form-item>
        <el-form-item label="颁发单位：" style="width: 320px" prop="awardName">
          {{ form.awardName }}
        </el-form-item>
        <el-form-item label="标志性成果：" style="width: 700px" prop="isLandmark">
          <dict-tag :options="dict.type.village_whether" :value="form.isLandmark"/>
        </el-form-item>
        <el-form-item label="佐证材料：" style="width: 700px" prop="supportingMaterial">
          <file-upload style="margin-left: 50px;width: 300px" :openUplad="false" :isShowTip="false"
                       v-model="form.supportingMaterial"
          />
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import {
  listAchievement,
  getAchievement,
  delAchievement,
  addAchievement,
  updateAchievement
} from '@/api/village/achievement'
import { listReform } from '@/api/village/reform'

export default {
  name: 'Achievement',
  dicts: ['village_achievement_rank', 'village_achievement_grade', 'village_whether'],
  data() {
    return {
      allItems: [],
      restaurants: [],
      list: [],
      expenselist: [],
      options: [],
      optionsitem: [],
      pageData: {
        pageNum: 1,
        pageSize: 10
      },
      pagetotal: 0,
      detailopen: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 成果管理表格数据
      achievementList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        certificateNumber: null,
        achievementName: null,
        principalName: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        achievementName: [
          { required: true, message: '成果名称不能为空', trigger: 'blur' }
        ],
        principalName: [
          { required: true, message: '证书负责人不能为空', trigger: 'blur' }
        ],
        awardTime: [
          { required: true, message: '颁发日期不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.name = this.$store.state.user.name

  },
  methods: {
    // 修改loadMore方法逻辑
    loadMore() {
      console.log(this.pagetotal)
      console.log(this.optionsitem.length)
      if (this.optionsitem.length !== this.pagetotal) { // 当前已加载数量小于总数量时加载更多
        this.pageData.pageNum++
        listAchievement(this.pageData).then(response => {
          let relist = response.rows
          relist.forEach(item => {
            let data={
              label:item.achievementName,
              value:item.id
            }
            console.log('data',data)
            this.optionsitem.push(data)
          })

          this.pagetotal = response.total // 更新总数量
        })
      }
    },
    remoteMethod(query) {

      if (query !== '') {
        this.loadings = true // 注意这里是 this.loadings
        this.optionsitem = []
        this.queryParams.achievementName = query
        listAchievement({ achievementName: query }).then(response => {
          let rlist = response.rows
          this.optionsitem = rlist.map(r => {
            return {
              label: r.achievementName,
              value: r.id
            }
          })
          console.log(this.optionsitem)
        })

        this.loadings = false
      } else {
        console.log('clear')
        this.optionsitem = this.list
      }
    },
    handledetailopen(row) {
      this.reset()
      const id = row.id || this.ids
      getAchievement(id).then(response => {
        this.form = response.data
        this.detailopen = true

      })
    },
    /** 查询成果管理列表 */
    getList() {
      this.loading = true
      listAchievement(this.queryParams).then(response => {
        this.achievementList = response.rows
        this.total = response.total

        this.optionsitem = this.achievementList.map(r => {
          return {
            label: r.achievementName,
            value: r.id
          }
        })
        this.list = this.optionsitem

        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        achievementId: null,
        certificateNumber: null,
        achievementType: null,
        achievementName: null,
        principalName: null,
        participant: null,
        achievementRank: null,
        achievementGrade: null,
        awardTime: null,
        awardName: null,
        supportingMaterial: null,
        isLandmark: null,
        createTime: null,
        updateTime: null,
        createBy: null,
        updateBy: null,
        isDelete: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加成果管理'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getAchievement(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改成果管理'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateAchievement(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addAchievement(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除成果名称为"' + row.achievementName + '"的数据项？').then(function() {
        return delAchievement(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('village/achievement/export', {
        ...this.queryParams
      }, `achievement_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
